<html>
	<head>
		<title>A Better Photographer with Depth of Field</title>
        <link rel="stylesheet" href="../../style.css">
        <script type="text/javascript" src="../../lib/spidergl.js"></script>
		<script type="text/javascript" src="../../lib/spidergl-config.js"></script>
		<script type="text/javascript" src="../../lib/nvmc.js"></script>
		<script type="text/javascript" src="../../lib/nvmc-config.js"></script>
        <script type="text/javascript" src="../../globals.js"></script>
		<script type="text/javascript" src="../../lib/dataview.js"></script>
		<script type="text/javascript" src="../../lib/load_ply/parsePLY.js"></script>
		<script type="text/javascript" src="../../lib/load_ply/importPLY.js"></script>
		<script type="text/javascript" src="../../lib/obj_importer.js"></script>
		<script type="text/javascript" src="../../chapter3/cube.js"></script>
		<script type="text/javascript" src="../../chapter3/cone.js"></script>
		<script type="text/javascript" src="../../chapter3/cylinder.js"></script>
		<script type="text/javascript" src="../../chapter4/0/track.js"></script>
		<script type="text/javascript" src="../../chapter4/0/race.js"></script>
		<script type="text/javascript" src="../../chapter4/0/building.js"></script>
		<script type="text/javascript" src="../../chapter4/0/quadrilateral.js"></script>
		<script type="text/javascript" src="../../chapter7/1/cabin_no_mirror.js"></script>
		<script type="text/javascript" src="../../chapter7/0/texturedtrack.js"></script>
		<script type="text/javascript" src="../../chapter7/0/texturedbuilding.js"></script>
		<script type="text/javascript" src="../../chapter7/0/texturedquadrilateral.js"></script>
		<script type="text/javascript" src="../../chapter7/1/rearmirror.js"></script>
		<script type="text/javascript" src="../../chapter4/0/shaders.js"></script>
		<script type="text/javascript" src="../../chapter5/0/shaders.js"></script>
		<script type="text/javascript" src="../../chapter6/0/shaders.js"></script>
		<script type="text/javascript" src="../../chapter7/0/shaders.js"></script>
		<script type="text/javascript" src="../../chapter7/2/shaders.js"></script>
		<script type="text/javascript" src="../../chapter7/3/shaders.js"></script>
		<script type="text/javascript" src="../../chapter7/4/shaders.js"></script>
		<script type="text/javascript" src="../../chapter8/0/shaders.js"></script>
		<script type="text/javascript" src="../../chapter9/2/shaders.js"></script>
		<script type="text/javascript" src="../../chapter9/3/shaders.js"></script>
		<script type="text/javascript" src="../../chapter10/0/shaders.js"></script>
		<script type="text/javascript" src="../../chapter4/0/0.js"></script>
		<script type="text/javascript" src="../../chapter4/1/1.js"></script>
		<script type="text/javascript" src="../../chapter4/2/2.js"></script>
		<script type="text/javascript" src="../../chapter5/0/0.js"></script>
		<script type="text/javascript" src="../../chapter6/0/0.js"></script>
		<script type="text/javascript" src="../../chapter6/3/phong_shaders.js"></script>
		<script type="text/javascript" src="../../chapter6/0/compute_normals.js"></script>
		<script type="text/javascript" src="../../chapter7/0/0.js"></script>
		<script type="text/javascript" src="../../chapter7/1/1.js"></script>
		<script type="text/javascript" src="../../chapter7/2/2.js"></script>
		<script type="text/javascript" src="../../chapter7/3/3.js"></script>
		<script type="text/javascript" src="../../chapter7/4/4.js"></script>
		<script type="text/javascript" src="../../chapter8/0/0.js"></script>
		<script type="text/javascript" src="../../chapter9/2/2.js"></script>
		<script type="text/javascript" src="../../chapter9/3/3.js"></script>
		<script type="text/javascript" src="../../chapter10/0/0.js"></script>
		<script type="text/javascript" src="../../lib/nvmc-glue.js"></script>
	</head>
	<body>
    <ul class="combar">
        <li>Instructions</li>
        <li>[w]: move forward (mode 1 and 2)<br>
            [s]: move backward (mode 1 and 3)<br>
            [a]: steer left (mode 1) / pan left (mode 3)<br>
            [d]: steer right (mode 1) / pan right (mode 3)<br>
            [q]: move up (mode 2,3)<br>
            [e]: move down (mode 2,3)<br>
            [2]: ++mode<br>
            [1]: --mode<br>
            <br>
            Modes:<br>
            1: Chase View <br>
            2: Photographer View<br>
            3: The observer Camera<br>
            4: Driver Perspective <br>
            <br>
            [n]: Orbit around a fix point in front of the camera<br>
            [m]: Look around <br>
            [l]: lock view to the car (in photographer mode)<br>
            [u]: unlock view to the car (in photographer mode)<br>
            <b>[3]: enable/disable Depth of Field</b><br>
    </ul>
    <ul class="navbar">
        <li> Section 10.1.2 page 300 </li>
        <li> Depth of field effect is done by blurring the pixels proportionally to their distance from the viewer.
        This is the second time we use the depth buffer (the first one was for shadow mapping)</li>
    </ul>
        <center>
			<h2>A Better Photographer with Depth of Field</h2>
			<div>
			  <hr/>
			  <canvas id="nvmc-canvas" width="600" height="400" style="border:1px solid gray;"></canvas>
			  <hr/>
			</div><h3>Log</h3>
			

			  <textarea id="nvmc-log" rows="4" cols="80"></textarea>
			<div>
			  <div id="nvmc-fps">FPS</div>
			  <div id="nvmc-latency">Latency</div>
			  <div id="nvmc-server-clock-delta">Server Clock Delta</div>
			  <div id="nvmc-server-time">Server Time</div>
			</div>
			<hr/>
		</center>
	</body>
</html>
